<template>
    <div class="blackboard">
      <div class="books">
        <div class="book" :class="{selected: book.id == currentBookId}" v-for="(book, idx) in books" :key="idx" @click="switchBook(book)">{{book.label}}</div>
      </div>
      <div class="modules">
          <div class="module" :class="{selected: module.id == currentModuleId}" v-for="(module, idx) in modules" :key="idx" @click="switchModule(module)">{{module.name}}</div>
      </div>
      
      <div class="letters">
          <div class="letter-item" v-for="(item, idx) in answers" :key="idx" :class="{correct: item.match == 1, incorrect: item.match == -1}">{{ item.value }}</div>
          <button class="btn btn-remove iconfont icon-remove" @click="backspace"></button>  
      </div>
      <div class="desktop">
        <div class="letter-item-random" :class="{selected: selectedIndexes.includes(idx)}" v-for="(item, idx) in randomLetters" :key="idx" @click="selectLetter({value:item, index:idx})">{{ item }}</div>
      </div>
      <div class="text" v-if="word"><div class="cn" v-show="showText">{{word.translation}}</div> <div class="symbol" v-show="showText">{{ word. symbol1}}</div></div>
      <div class="tool-bar">
        <button class="btn btn-play iconfont icon-play" @click="playAudio"></button>
        <button class="btn btn-play iconfont icon-view" @click="toggleShow"></button>
        <button class="btn btn-confirm" @click="confirm">确定</button>  
        <button class="btn btn-next" @click="generate">切换</button>
      </div>  
    </div>
    
  </template>
  
  <script>
  export default {
    name: 'WordSpell',
    data(){
      return {
        words: [],
        word: null,
        randomLetters: [],
        selectedIndexes: [],
        answers: [],
        books:[{id: 148, label: '一年级上册'}, {id: 149, label: '一年级下册'}, {id: 150, label: '二年级上册'}],
        modules: [],
        currentBookId: 148,
        currentModuleId: null,
        wordIndex: 0,
        audio: null,
        showText: false
      }
    },
    mounted(){
      
      this.loadWords();
      this.audio = new Audio();
    },
    watch:{
      selectedIndexes:{
        handler(){
          this.answers.forEach(item => {
            item.value = ''
          })
          for(let i = 0; i < this.selectedIndexes.length; i++){
            this.answers[i].value = this.randomLetters[this.selectedIndexes[i]];
          }  
        },
        deep:true
      }
    },
    computed:{

    },
    methods:{
      loadWords(){
        
        this.$api.bookService.words(this.currentBookId).then(res => {
          this.modules = res.data.list;
          this.switchModule(this.modules[0])
        })
      },
      switchBook(book){
        this.currentBookId = book.id;
        this.words = []
        this.loadWords();
      },
      switchModule(module){
        if(!module){
          return ;
        }
        this.currentModuleId = module.id;
        let words = JSON.parse(JSON.stringify(module.word));
        words.sort(()=> Math.random() - 0.5) ;
        this.words = words;
        this.wordIndex = 0;
        this.generate();
      },
      confirm(){
        let flag = true;
        this.answers.forEach(item => {
          item.match = item.answer == item.value ? 1 : -1;
          if(item.match == -1){
            flag = false;
          }
        })
        
        if(flag){
          this.playAudio();
          this.showText = true;
          console.log('true')
        }
        else{
          console.log('error')
        }
      },
      backspace(){
        if(this.selectedIndexes.length == 0){
          
          return;
        }
        
          this.selectedIndexes.pop();
        
      },
      generate(){
        
        this.word = this.words[this.wordIndex ++ % this.words.length];
        let letters = this.word.word.split('');
        this.answers = letters.map(item => {
          return {
            answer: item,
            value: '',
            match: 0
          }
        })
        this.showText = false;
        this.selectedIndexes = []
        letters.sort(()=> Math.random() - 0.5);
        this.randomLetters = letters;
       
        

      },
      selectLetter(e){
        
        if(this.selectedIndexes.length == 0){
          this.selectedIndexes.push(e.index);
          return;
        }
        let lastIndex = this.selectedIndexes[this.selectedIndexes.length - 1];
        if(lastIndex == e.index){
          this.selectedIndexes.pop();
        } 
        else if(!this.selectedIndexes.includes(e.index)){
          this.selectedIndexes.push(e.index);
        }

        
        
      },
      playAudio(){
        let src = this.word.audio.replace('https://cdn.beijinxuetang.com', 'https://oss.xmappservice.com/english/material/cdn.beijinxuetang.com')
        console.log(src);
        this.audio.src = src;
        this.audio.play();
      },
      toggleShow(){
        this.showText = !this.showText;
      }
    }
   
  }
  </script>
  
  <style scoped>
   .blackboard{
    background: rgb(4, 76, 64);
    width: 100%;
    min-height: 100%;
   }

   .books{
    position: fixed;
    top:0;
    left:0;
    bottom:0;
    padding-top:30px;
    background: rgba(0, 0, 0, 0.2);
    .book{
      cursor: pointer;
      padding: 0 18px;
      font-size: 24px;
      line-height: 80px;
      color:#acb0b4;
      


      &.selected{
        font-weight: bold;
        color:coral;
      }
    }
   }

   .modules{
    position: fixed;
    top:0;
    right:0;
    padding-top:30px;
    overflow-y: auto;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    
    .module{
      width: 240px;
      overflow: hidden;
      white-space:nowrap; 
      text-overflow:ellipsis;

      cursor: pointer;
      padding-left: 30px;
      font-size: 20px;
      line-height: 80px;
      color:#acb0b4;

      &.selected{
        font-weight: bold;
        color:coral;
      }
    }
   }

   .letters{
    box-sizing: border-box;
    padding: 120px 100px 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;  
    min-height: 240px;

      .letter-item{
        font-family: 'PlaywriteGBS';
        font-weight: bold;
        line-height: 80px;
        color:rgb(230, 127, 48);
        font-size: 50px;
  
        width: 80px;
        text-align: center;


        margin:0 5px;
        height: 80px;
        position: relative;

        border-bottom: 10px solid #1890ff;

        &.correct{
          color:rgb(108, 180, 99);
        }

        &.incorrect{
          color:rgb(218, 79, 55);
        }
    }

    .btn{
      background-color: transparent;
      color: #1890ff;
      width: 50px;
      text-align: center;
      padding:0;
      margin:0;
    }
   }

   


    

    .tool-bar{
        margin: 50px auto;
    }
    .btn{
        border: none;
        background-color: #1890ff;
        color: #FFFFFF;
        padding: 10px 40px;
        line-height: 1.5;
        font-size: 30px;
        cursor: pointer;
        margin:0 20px;
    }

    .desktop{
      height: 200px;
      position: relative;
      padding-right: 50px;
      margin:0 auto;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;  

      .letter-item-random{
        font-family: 'PlaywriteGBS';
        font-weight: bold;
        line-height: 80px;
        color:rgb(230, 127, 48);
        font-size: 50px;
  
        width: 80px;
        text-align: center;
        background-color: rgba(121, 165, 115, 0.3);
        border-radius: 20px;  
        margin:0 5px;
        height: 80px;
        cursor: pointer;

        &.selected{
          color: rgba(147, 151, 147, 0.3);
          background-color: rgba(121, 165, 115, 0.1);
        }

      }

    }

    .text{
      color:rgb(230, 127, 48);
      text-align: center;
      font-size: 30px;
      line-height: 60px;
    }
    
  </style>
  